<template>
  <el-dialog
      v-model="dialogVisible"
      title="添加房屋信息"
      width="30%"
      :before-close="handleClose"
      center
  >
    <el-form ref="validateForm" :model="familyForm" :rules="houseRules" label-width="120px" class="demo-dynamic" status-icon>
      <el-form-item label="户主" prop="house_owner">
        <el-input v-model="familyForm.house_owner" placeholder="Enter house_name...">

        </el-input>
      </el-form-item>
      <el-form-item label="成员总数" prop="sum">
        <el-input v-model="familyForm.sum" placeholder="Enter address...">

        </el-input>
      </el-form-item>
      <el-form-item label="地址 " prop="address">
        <el-input v-model="familyForm.address" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="地区编号 " prop="region_id">
        <el-input v-model="familyForm.region_id" placeholder="Enter region_id...">

        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitAdd">添加房屋</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => {
          closeDialog(false);
        }">取消</el-button>
        <el-button type="primary" @click="() => {
          closeDialog(false);
        }"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script >
import {reactive, toRefs, ref} from "vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";
function houseAdd(validateForm, state, emit){
  const submitAdd = () => {
    validateForm.value.validate((valid) => {
      console.log(valid+",,,")
      if (valid){
        console.log(valid+",,,2")
        const params = {
          house_owner: state.familyForm.house_owner,
          address: state.familyForm.address,
          sum: parseInt(state.familyForm.sum),
          region_id: parseInt(state.familyForm.region_id),
        };
        console.log(params+"ss")
        axios.post("/api/family", (params)).then((res) => {
          console.log("sss")
          //重置表单
          validateForm.value.resetFields()
          console.log(res.data)
          emit('onCloseDialog', false, res.data)
        })
      }
    })
  };
  return {
    submitAdd
  }
}
export default {
  props: {
    dialogVisible:Boolean
  },
  emits: ["onCloseDialog"],
  setup(props, {emit}) {
    const validateForm = ref();
    const state=reactive({
      dialogVisible:props.dialogVisible,
      familyForm:{
        house_owner:"",
        sum:0,
        region_id:1,
        address:""
      }
    });
    const houseRules = {
      house_owner: [{required: true, message: 'Please input house_name', trigger: 'blur',}],
      address: [{required: true, message: 'Please input address', trigger: 'blur',}],
      sum: [{required: true, message: 'Please input family_id', trigger: 'blur',}],
      region_id: [{required: true, message: 'Please input region_id', trigger: 'blur',}],
    }
    const closeDialog = (visible) => {
      emit('onCloseDialog', visible)
    }
    const handleClose = (done) => {
      ElMessageBox.confirm('Are you sure to close this dialog?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }
    return {
      state,
      ...toRefs(state),
      handleClose,
      closeDialog,
      houseRules,
      validateForm,
      ...houseAdd(validateForm, state, emit),
    }
  }
}
</script>

<style scoped>

</style>